{% extends 'install-base.html' %}

{% block title %}{{dj_title}}{% endblock %}

{% block extra_js %}

    var csrftoken = getCookie('csrftoken');

    function search_handler () {
        if ($('#sel_os_release').validationEngine('validate')) {
            return;
        }

        var container = $('#div_machine_list');
        $.ajax({
            type: 'post',
            url: '{%url ajax_getmlst dj_itype %}',
            dataType: 'html',
            data: $('#form_install').serializeArray(),
            async: false,
            crossDomain: false,
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type)) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            },
            success: function(r) {
                container.html('<br>');
                container.attr('class', 'loading-indicator');
                setTimeout(function() {
                    container.attr('class', '');
                    $('#txt_host').attr('value', '');
                    //$('#sel_mgroup').attr('value', '');
                    container.html(r);
                }, 500);
            },
            error: function() {
                alert("get machine list failed!");
            }
        }); // end of ajax
    }

    function submit_handler () {
        $('#form_install').ajaxSubmit({
            dataType: 'json',
            beforeSerialize:function() {
                if (! $('#form_install').validationEngine('validate')) {
                    return false;
                }

                $.blockUI({ message: '<div id="div_blockbox" class="blockbox_wait"><h3>Just a moment...</h3></div>'});
            },
            success:function(r) {
                // type: alert, info
                $('#div_blockbox').attr('class', 'blockbox_' + r.type);
                $('#div_blockbox').html(r.content);
                $('.blockOverlay').attr('title','click to go back').click(function() {
                    var opt = {};
                    if (r.type == 'info') {
                        opt['onUnblock'] = function() { $('#div_machine_list').html('<br>'); }
                    }
                    $.unblockUI(opt);
                });
            },
            error:function() {
                $.unblockUI();
                alert("submit form_install failed!");
            }
        });  // end of ajaxSubmit
    }

    $(document).ready(function() {

{% include 'topnav-imd.js' %}

        $('#form_install').validationEngine('attach', {scroll: false});
        $('body').mousemove(function() {
            $('#form_install').validationEngine('hideAll');
        });

        $.Mustache.addFromDom('sel_build_tmpl', 'sel_mgroup_tmpl');

        $('#sel_os_release').change(function() { 
            var sel_osr = $(this);

            /* For feild validation: if validation failed, 
               validationEngine return true.
               For form validation: if validation failed, 
               validationEngine return false 
             */
            if (sel_osr.validationEngine('validate')) {
                return;
            }

            $.ajax({
                type: 'post',
                url: '{%url ajax_getbnomgrp %}',
                dataType: 'json',
                data: {sel_site: $('#sel_site').val(),
                       sel_os_release: sel_osr.val()},
                crossDomain: false,
                beforeSend: function(xhr, settings) {
                    if (!csrfSafeMethod(settings.type)) {
                        xhr.setRequestHeader("X-CSRFToken", csrftoken);
                    }
                    showLoading($('#sel_build'));
                    showLoading($('#sel_mgroup'));
                },
                success: function(r) {
                    endLoading($('#sel_build'));
                    endLoading($('#sel_mgroup'));

                    $('#sel_build').mustache(
                        'sel_build_tmpl', 
                        {m_builds: r.builds,
                         'm_builds_len?': r.builds ? r.builds.length : null},
                        {method: 'html'});
		    // make sure the first option is selected
		    $("#sel_build option:first").attr('selected','selected');
                    $('#sel_mgroup').mustache(
                        'sel_mgroup_tmpl', 
                        {m_mgroups: r.mgroups,
                         'm_mgroups_len?': r.mgroups ? r.mgroups.length : null},
                        {method: 'html'});
                },
                error: function() {
                    endLoading($('#sel_build'));
                    endLoading($('#sel_mgroup'));
                    alert("get build no. or machine group failed!");
                }
            }); // end of ajax
          }); // end of change


        $('#sel_mgroup').change(function() { 
            search_handler();
        }); // end of change

        $('#btn_search').click(function() { 
            search_handler();
        }); // end of click
      
        $('#sel_build').change(function() { 
            $(this).validationEngine('validate');
        });

        $('#form_install').submit(function() {
            // only if the machine list is present
            if ($('#btn_install').length > 0) {
                submit_handler();
            }

            // disable default behavior
            return false;
        });

        $('#div_machine_list').on('click', '#btn_install', function(e) { 
            e.preventDefault(); 

            submit_handler();
        }); // end of on

    }); // end of ready()

{% endblock %}

{% block client_tmpl %}
<!-- Mustache Templates -->
  <script id="sel_build_tmpl" type="text/html">
    [[#m_builds_len?]]
      [[#m_builds]]
        <option value="[[.]]">[[.]]</option>
      [[/m_builds]]
    [[/m_builds_len?]]
  </script>

  <script id="sel_mgroup_tmpl" type="text/html">
    [[#m_mgroups_len?]]
        <option value=""></option>
      [[#m_mgroups]]
        <option value="[[id]]">[[name]]</option>
      [[/m_mgroups]]
    [[/m_mgroups_len?]]
  </script>
<!-- End of Mustache Template -->
{% endblock %}

{% block nav_title %}{{dj_title}}{% endblock %}

{% block action %}do_{{dj_itype}}{% endblock %}

{% block search_section %}
    <tr>
      <td class="th-label">Site:</td>
      <td><select id="sel_site" name="sel_site" class="fixed-field validate[required]">
    {% for s in dj_site_qs %}
      <option value="{{s.id}}" {%ifequal s.name dj_this_site %} selected {% endifequal %}>{{s.name}}</option>
    {% endfor %}
      </select><span class="field-indic"></span>
    </td></tr>

    <tr>
      <td class="th-label">OS Release:</td>
      <td><select id="sel_os_release" name="sel_os_release" class="fixed-field validate[required]">
      <option value=""></option>
    {% for r in dj_os_release_qs %}
      <option value="{{r.name}}">{{r.description}}</option>
    {% endfor %}
      </select><span class="field-indic"></span>
    </td></tr>

    <tr>
      <td class="th-label">Build:</td>
      <td><select id="sel_build" name="sel_build" class="fixed-field validate[required]">
        <!-- ajax -->
      </select><span class="field-indic"></span>
    </td></tr>

    <tr>
      <td class="th-label">Host:</td>
      <td><input  type="text" id="txt_host" name="txt_host" value="" class="fixed-field"/><span class="field-indic"></span>
    </td></tr> 

    <tr>
      <td class="th-label">MGroup:</td>
      <td><select id="sel_mgroup" name="sel_mgroup" class="fixed-field">
        <!-- ajax -->
      </select><span class="field-indic"></span>
    </td></tr> 

    <tr>
      <td class="th-label"></td>
      <td><input id="btn_search" name="btn_search" type="button" value="Find Machine" style="margin-left: 10px;"/>
      <span class="field-indic"></span>
    </td></tr> 

{% endblock %}

